<template>
  <div>
    <!-- 头部 -->
    <header>
      <!-- 类解释：navbar【导航栏】，navbar-expand-lg【在lg屏幕(992px)上水平排列，在这个屏幕(992px)下垂直堆叠】 -->
      <!-- 类解释：bg-dark【背景黑色】，navbar-dark【字体白色】，fixed-top【固定在顶部】，导航栏默认占整个屏幕宽度 -->
      <!-- nav自带flex弹性布局 -->
      <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
        <!-- 类解释：container【内容两遍留白】 -->
        <div class="container">
          <!-- 内容：Logo和文本。navbar-nav【导航栏中的导航】 -->
          <div class="navbar-nav">
            <!-- 类解释：nav-link【导航中的链接】，navbar-brand【导航栏品牌-用于高亮显示品牌，可以用于做Logo】 -->
            <a href="#" class="nav-link navbar-brand">
              <!-- 类解释：rounded-circle【将图像塑造为圆形】 -->
              <img src="../../assets/images/logo.png" height="40px"/>
            </a>
          </div>

          <!-- 折叠导航栏按钮：navbar-toggler【导航栏切换】，data-bs-toggle【数据切换方式collapse折叠】，将id="demo"的div折叠 -->
          <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#demo">
            <!-- 类解释：navbar-toggler-icon【导航栏切换图标】 -->
            <span class="navbar-toggler-icon"></span>
          </button>


          <!-- 内容：导航和关键字搜索 -->
          <!-- 类解释：collapse【折叠】，navbar-collapse【导航栏折叠】，justify-content-between【主轴内容排列-两端对齐】 -->
          <div id="demo" class="collapse navbar-collapse justify-content-between">
            <!-- 导航 -->
            <ul class="navbar-nav">
              <!-- 类解释：mx-2【左右外边距0.5rem=7px】 -->
              <li class="nav-item mx-2">
                <a href="./index.html" class="nav-link"><i class="bi bi-house-door-fill"></i> 首页</a>
              </li>
              <li class="nav-item mx-2">
                <a href="./blog-archives.html" class="nav-link"><i class="bi bi-clock-fill"></i> 归档</a>
              </li>
              <!-- 类解释：dropdown【定义下拉菜单】 -->
              <li class="nav-item mx-2 dropdown">
                <!-- 类解释：dropdown-toggle【点击a标签，进行下拉切换】，data-bs-toggle【数据切换方式dropdown下拉式的】 -->
                <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                  <i class="bi bi-brush-fill"></i> 文章分类
                </a>
                <!-- 类解释：dropdown-menu【下拉菜单】 -->
                <ul class="dropdown-menu" style="margin-top: 13px">
                  <li v-for="item in listData" class="dropdown-item">
                    <a :href="'./index.html?typeId='+item.id">{{ item.typeName }}({{ item.num }})</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item mx-2">
                <a href="#" class="nav-link"><i class="bi bi-person-hearts"></i> 关于我</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      listData: []
    }
  },
  methods: {
    getArticleTypeCount() {
      var data={
        num: this.num,
        typeName: this.typeName
      }
      this.$http.get("/article/articleTypeCount", data).then(res => {
        this.listData = res.data.data
        console.log(this.listData)
      })
    },

  },
  mounted() {
    this.getArticleTypeCount();
  }
}
</script>

<style>
html {
  /* bootstrap中默认1rem=16px，即html的fs为16px，可以通过以下方式修改 */
  font-size: 14px;
}

#demo li:hover {
  background: #99ccff;
}
</style>
